<template>
    <div class="main-content" :style='{"padding":"30px","margin":"0"}'>
        <!-- 列表页 -->
        <template v-if="showFlag">
            <el-form class="center-form-pv" :style='{"margin":"0 0 20px"}' :inline="true" :model="searchForm">
                <el-row :style='{"display":"block"}'>
                    <div :style='{"margin":"0 10px 0 0","display":"inline-block"}'>
                        <label :style='{"margin":"0 10px 0 0","color":"#374254","display":"inline-block","lineHeight":"40px","fontSize":"14px","fontWeight":"600","height":"40px"}'
                               class="item-label">活动类型</label>
                        <el-input v-model="searchForm.yundongmingcheng" placeholder="活动类型"
                                  @keydown.enter.native="search()" clearable></el-input>
                    </div>
                    <div :style='{"margin":"0 10px 0 0","display":"inline-block"}'>
                        <label :style='{"margin":"0 10px 0 0","color":"#374254","display":"inline-block","lineHeight":"40px","fontSize":"14px","fontWeight":"600","height":"40px"}'
                               class="item-label">学生账号</label>
                        <el-input v-model="searchForm.xueshengzhanghao" placeholder="学生账号"
                                  @keydown.enter.native="search()" clearable></el-input>
                    </div>
                    <el-button class="search" type="success" @click="search()">
                        <span class="icon iconfont icon-chakan14"
                              :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                        查询
                    </el-button>
                </el-row>

                <el-row class="actions" :style='{"flexWrap":"wrap","margin":"20px 0","display":"flex"}'>
                    <el-button class="add" v-if="isAuth('xueshengbaomingxinxi','新增')" type="success"
                               @click="addOrUpdateHandler()">
                        <span class="icon iconfont icon-tianjia1"
                              :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                        添加
                    </el-button>
                    <el-button class="del" v-if="isAuth('xueshengbaomingxinxi','删除')"
                               :disabled="dataListSelections.length?false:true" type="danger" @click="deleteHandler()">
                        <span class="icon iconfont icon-shanchu15"
                              :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                        删除
                    </el-button>


                </el-row>
            </el-form>
            <div :style='{"width":"100%","padding":"10px"}'>
                <el-table class="tables"
                          :stripe='false'
                          :style='{"width":"100%","padding":"0","borderColor":"#eee","borderStyle":"solid","borderWidth":"1px 0 0 1px","background":"#fff"}'
                          :border='true'
                          v-if="isAuth('xueshengbaomingxinxi','查看')"
                          :data="dataList"
                          v-loading="dataListLoading"
                          @selection-change="selectionChangeHandler">
                    <el-table-column :resizable='true' type="selection" align="center" width="50"></el-table-column>
                    <el-table-column :resizable='true' :sortable='false' label="序号" type="index" width="50"/>
                    <!-- yundongmingcheng -->
                    <!-- $column.hiden -->
                    <el-table-column :resizable='true' :sortable='false'
                                     prop="designation"
                                     label="活动名称">
                        <template slot-scope="scope">
                            {{scope.row.designation}}
                        </template>
                    </el-table-column>
                    <el-table-column :resizable='true' :sortable='false'
                                     prop="yundongmingcheng"
                                     label="活动类型">
                        <template slot-scope="scope">
                            {{scope.row.yundongmingcheng}}
                        </template>
                    </el-table-column>
                    <!-- tupian -->
                    <!-- $column.hiden -->
                    <!-- 无 -->
                    <el-table-column :resizable='true' :sortable='false' prop="tupian" width="200" label="图片">
                        <template slot-scope="scope">
                            <div v-if="scope.row.tupian">
                                <img v-if="scope.row.tupian.substring(0,4)=='http'"
                                     :src="scope.row.tupian.split(',')[0]" width="100" height="100"
                                     style="object-fit: cover">
                                <img v-else :src="$base.url+scope.row.tupian.split(',')[0]" width="100" height="100"
                                     style="object-fit: cover">
                            </div>
                            <div v-else>无图片</div>
                        </template>
                    </el-table-column>
                    <!-- bisaishijian -->
                    <!-- $column.hiden -->
                    <el-table-column :resizable='true' :sortable='false'
                                     prop="bisaishijian"
                                     label="比赛时间">
                        <template slot-scope="scope">
                            {{scope.row.bisaishijian}}
                        </template>
                    </el-table-column>
                    <!-- cansaididian -->
                    <!-- $column.hiden -->
                    <el-table-column :resizable='true' :sortable='false'
                                     prop="cansaididian"
                                     label="参赛地点">
                        <template slot-scope="scope">
                            {{scope.row.cansaididian}}
                        </template>
                    </el-table-column>
                    <!-- xueshengzhanghao -->
                    <!-- $column.hiden -->
                    <el-table-column :resizable='true' :sortable='false'
                                     prop="xueshengzhanghao"
                                     label="学生账号">
                        <template slot-scope="scope">
                            {{scope.row.xueshengzhanghao}}
                        </template>
                    </el-table-column>
                    <!-- xueshengxingming -->
                    <!-- $column.hiden -->
                    <el-table-column :resizable='true' :sortable='false'
                                     prop="xueshengxingming"
                                     label="学生姓名">
                        <template slot-scope="scope">
                            {{scope.row.xueshengxingming}}
                        </template>
                    </el-table-column>
                    <!-- shoujihao -->
                    <!-- $column.hiden -->
                    <el-table-column :resizable='true' :sortable='false'
                                     prop="shoujihao"
                                     label="手机号">
                        <template slot-scope="scope">
                            {{scope.row.shoujihao}}
                        </template>
                    </el-table-column>
                    <!-- baomingshijian -->
                    <!-- $column.hiden -->
                    <el-table-column :resizable='true' :sortable='false'
                                     prop="baomingshijian"
                                     label="报名时间">
                        <template slot-scope="scope">
                            {{scope.row.baomingshijian}}
                        </template>
                    </el-table-column>
                    <!-- crossuserid -->
                    <!-- 是 -->
                    <!-- crossrefid -->
                    <!-- 是 -->
                    <el-table-column width="300" label="操作">
                        <template slot-scope="scope">
                            <el-button class="view" v-if=" isAuth('xueshengbaomingxinxi','查看')" type="success"
                                       @click="addOrUpdateHandler(scope.row.id,'info')">
                                <span class="icon iconfont icon-chakan2"
                                      :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                                查看
                            </el-button>
                            <!--<el-button class="btn8" v-if="isAuth('xueshengbaomingxinxi','安排赛程')"
                                       @click="xueshengsaichenganpaiCrossAddOrUpdateHandler(scope.row,'cross','','','','')"
                                       type="success">
                                <span class="icon iconfont icon-xihuan"
                                      :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                                安排赛程
                            </el-button>-->
                            <el-button class="edit" v-if=" isAuth('xueshengbaomingxinxi','修改') " type="success"
                                       @click="addOrUpdateHandler(scope.row.id)">
                                <span class="icon iconfont icon-bianji"
                                      :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                                修改
                            </el-button>


                            <el-button class="del" v-if="isAuth('xueshengbaomingxinxi','删除') " type="primary"
                                       @click="deleteHandler(scope.row.id )">
                                <span class="icon iconfont icon-shanchu6"
                                      :style='{"margin":"0 2px","fontSize":"14px","color":"#fff","height":"40px"}'></span>
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination
                    @size-change="sizeChangeHandle"
                    @current-change="currentChangeHandle"
                    :current-page="pageIndex"
                    background
                    :page-sizes="[10, 50, 100, 200]"
                    :page-size="pageSize"
                    :layout="layouts.join()"
                    :total="totalPage"
                    prev-text="< "
                    next-text="> "
                    :hide-on-single-page="true"
                    :style='{"width":"100%","padding":"0","margin":"20px 0 0","whiteSpace":"nowrap","color":"#333","fontWeight":"500"}'
            ></el-pagination>
        </template>

        <!-- 添加/修改页面  将父组件的search方法传递给子组件-->
        <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>

        <xueshengsaichenganpai-cross-add-or-update v-if="xueshengsaichenganpaiCrossAddOrUpdateFlag" :parent="this"
                                                   ref="xueshengsaichenganpaiCrossaddOrUpdate"></xueshengsaichenganpai-cross-add-or-update>


    </div>
</template>

<script>
    import axios from 'axios'
    import AddOrUpdate from "./add-or-update";
    import xueshengsaichenganpaiCrossAddOrUpdate from "../xueshengsaichenganpai/add-or-update";

    export default {
        data() {
            return {
                searchForm: {
                    key: ""
                },
                form: {},
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                showFlag: true,
                sfshVisiable: false,
                shForm: {},
                chartVisiable: false,
                chartVisiable1: false,
                chartVisiable2: false,
                chartVisiable3: false,
                chartVisiable4: false,
                chartVisiable5: false,
                addOrUpdateFlag: false,
                xueshengsaichenganpaiCrossAddOrUpdateFlag: false,
                layouts: ["total", "prev", "pager", "next", "sizes", "jumper"],
            };
        },
        created() {
            this.init();
            this.getDataList();
            this.contentStyleChange()
        },
        mounted() {
        },
        filters: {
            htmlfilter: function (val) {
                return val.replace(/<[^>]*>/g).replace(/undefined/g, '');
            }
        },
        computed: {
            tablename() {
                return this.$storage.get('sessionTable')
            },
        },
        components: {
            AddOrUpdate,
            xueshengsaichenganpaiCrossAddOrUpdate,
        },
        methods: {
            contentStyleChange() {
                this.contentPageStyleChange()
            },
            // 分页
            contentPageStyleChange() {
                let arr = []

                // if(this.contents.pageTotal) arr.push('total')
                // if(this.contents.pageSizes) arr.push('sizes')
                // if(this.contents.pagePrevNext){
                //   arr.push('prev')
                //   if(this.contents.pagePager) arr.push('pager')
                //   arr.push('next')
                // }
                // if(this.contents.pageJumper) arr.push('jumper')
                // this.layouts = arr.join()
                // this.contents.pageEachNum = 10
            },
            xueshengsaichenganpaiCrossAddOrUpdateHandler(row, type, crossOptAudit, crossOptPay, statusColumnName, tips, statusColumnValue) {
                this.showFlag = false;
                this.addOrUpdateFlag = false;
                this.xueshengsaichenganpaiCrossAddOrUpdateFlag = true;
                this.$storage.set('crossObj', row);
                this.$storage.set('crossTable', 'xueshengbaomingxinxi');
                this.$storage.set('statusColumnName', statusColumnName);
                this.$storage.set('statusColumnValue', statusColumnValue);
                this.$storage.set('tips', tips);
                if (statusColumnName != '' && !statusColumnName.startsWith("[")) {
                    var obj = this.$storage.getObj('crossObj');
                    for (var o in obj) {
                        if (o == statusColumnName && obj[o] == statusColumnValue) {
                            this.$message({
                                message: tips,
                                type: "success",
                                duration: 1500,
                                onClose: () => {
                                    this.getDataList();
                                }
                            });
                            this.showFlag = true;
                            this.xueshengsaichenganpaiCrossAddOrUpdateFlag = false;
                            return;
                        }
                    }
                }
                this.$nextTick(() => {
                    this.$refs.xueshengsaichenganpaiCrossaddOrUpdate.init(row.id, type);
                });
            },


            init() {
            },
            search() {
                this.pageIndex = 1;
                this.getDataList();
            },

            // 获取数据列表
            getDataList() {
                this.dataListLoading = true;
                let params = {
                    page: this.pageIndex,
                    limit: this.pageSize,
                    sort: 'id',
                    order: 'desc',
                }
                if (this.searchForm.yundongmingcheng != '' && this.searchForm.yundongmingcheng != undefined) {
                    params['yundongmingcheng'] = '%' + this.searchForm.yundongmingcheng + '%'
                }
                if (this.searchForm.xueshengzhanghao != '' && this.searchForm.xueshengzhanghao != undefined) {
                    params['xueshengzhanghao'] = '%' + this.searchForm.xueshengzhanghao + '%'
                }
                params['sort'] = 'baomingshijian';
                params['order'] = 'desc';
                this.$http({
                    url: "xueshengbaomingxinxi/page",
                    method: "get",
                    params: params
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.dataList = data.data.list;
                        this.totalPage = data.data.total;
                    } else {
                        this.dataList = [];
                        this.totalPage = 0;
                    }
                    this.dataListLoading = false;
                });
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val;
                this.pageIndex = 1;
                this.getDataList();
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val;
                this.getDataList();
            },
            // 多选
            selectionChangeHandler(val) {
                this.dataListSelections = val;
            },
            // 添加/修改
            addOrUpdateHandler(id, type) {
                this.showFlag = false;
                this.addOrUpdateFlag = true;
                this.crossAddOrUpdateFlag = false;
                if (type != 'info') {
                    type = 'else';
                }
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id, type);
                });
            },
            // 下载
            download(file) {
                let arr = file.replace(new RegExp('upload/', "g"), "")
                axios.get(this.$base.url + 'file/download?fileName=' + arr, {
                    headers: {
                        token: this.$storage.get('Token')
                    },
                    responseType: "blob"
                }).then(({
                             data
                         }) => {
                    const binaryData = [];
                    binaryData.push(data);
                    const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
                        type: 'application/pdf;chartset=UTF-8'
                    }))
                    const a = document.createElement('a')
                    a.href = objectUrl
                    a.download = arr
                    // a.click()
                    // 下面这个写法兼容火狐
                    a.dispatchEvent(new MouseEvent('click', {
                        bubbles: true,
                        cancelable: true,
                        view: window
                    }))
                    window.URL.revokeObjectURL(data)
                }, err => {
                    axios.get((location.href.split(this.$base.name).length > 1 ? location.href.split(this.$base.name)[0] : '') + this.$base.name + '/file/download?fileName=' + arr, {
                        headers: {
                            token: this.$storage.get('Token')
                        },
                        responseType: "blob"
                    }).then(({
                                 data
                             }) => {
                        const binaryData = [];
                        binaryData.push(data);
                        const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
                            type: 'application/pdf;chartset=UTF-8'
                        }))
                        const a = document.createElement('a')
                        a.href = objectUrl
                        a.download = arr
                        // a.click()
                        // 下面这个写法兼容火狐
                        a.dispatchEvent(new MouseEvent('click', {
                            bubbles: true,
                            cancelable: true,
                            view: window
                        }))
                        window.URL.revokeObjectURL(data)
                    })
                })
            },
            // 预览
            preClick(file) {
                if (!file) {
                    return false
                }
                window.open((location.href.split(this.$base.name).length > 1 ? location.href.split(this.$base.name)[0] + this.$base.name + '/' + file : this.$base.url + file))
            },
            xueshengbaomingxinxistatusChange(e, row) {
                if (row.status == 0) {
                    row.passwordwrongnum = 0
                }
                this.$http({
                    url: 'xueshengbaomingxinxi/update',
                    method: 'post',
                    data: row
                }).then(res => {
                    if (row.status == 1) {
                        this.$message.error('该用户已锁定')
                    } else {
                        this.$message.success('该用户已解除锁定')
                    }
                })
            },
            // 删除
            deleteHandler(id) {
                var ids = id
                    ? [Number(id)]
                    : this.dataListSelections.map(item => {
                        return Number(item.id);
                    });
                this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.$http({
                        url: "xueshengbaomingxinxi/delete",
                        method: "post",
                        data: ids
                    }).then(({data}) => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: "操作成功",
                                type: "success",
                                duration: 1500,
                                onClose: () => {
                                    this.search();
                                }
                            });

                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                });
            },


        }

    };
</script>
<style lang="scss" scoped>

    .center-form-pv {
        .el-date-editor.el-input {
            width: auto;
        }
    }

    .el-input {
        width: auto;
    }

    // form
    .center-form-pv .el-input /deep/ .el-input__inner {
        border: 1px solid rgba(167, 180, 201, .3);
        border-radius: 4px;
        padding: 0 12px;
        outline: none;
        color: #a7b4c9;
        width: 170px;
        font-size: 14px;
        height: 40px;
    }

    .center-form-pv .el-select /deep/ .el-input__inner {
        border: 1px solid rgba(167, 180, 201, .3);
        border-radius: 4px;
        padding: 0 10px;
        outline: none;
        color: #a7b4c9;
        width: 170px;
        font-size: 14px;
        height: 40px;
    }

    .center-form-pv .el-date-editor /deep/ .el-input__inner {
        border: 1px solid rgba(167, 180, 201, .3);
        border-radius: 4px;
        padding: 0 10px 0 30px;
        outline: none;
        color: #a7b4c9;
        width: 170px;
        font-size: 14px;
        height: 40px;
    }

    .center-form-pv .search {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 24px;
        outline: none;
        color: #fff;
        background: #2ddcd3;
        width: auto;
        font-size: 14px;
        height: 40px;
    }

    .center-form-pv .search:hover {
        opacity: 0.8;
    }

    .center-form-pv .actions .add {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 24px;
        margin: 4px;
        outline: none;
        color: #fff;
        background: #ffa22b;
        width: auto;
        font-size: 14px;
        height: 40px;
    }

    .center-form-pv .actions .add:hover {
        opacity: 0.8;
    }

    .center-form-pv .actions .del {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 24px;
        margin: 4px;
        outline: none;
        color: #fff;
        background: #ff382b;
        width: auto;
        font-size: 14px;
        line-height: 40px;
        height: 40px;
    }

    .center-form-pv .actions .del:hover {
        opacity: 0.8;
    }

    .center-form-pv .actions .statis {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 24px;
        margin: 4px;
        outline: none;
        color: #fff;
        background: #05e6e6;
        width: auto;
        font-size: 14px;
        height: 40px;
    }

    .center-form-pv .actions .statis:hover {
        opacity: 0.8;
    }

    .center-form-pv .actions .btn18 {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 24px;
        margin: 4px;
        outline: none;
        color: #fff;
        background: #ff2b88;
        width: auto;
        font-size: 14px;
        height: 40px;
    }

    .center-form-pv .actions .btn18:hover {
        opacity: 0.8;
    }

    // table
    .el-table /deep/ .el-table__header-wrapper thead {
        color: #374254;
        font-weight: 600;
        width: 100%;
    }

    .el-table /deep/ .el-table__header-wrapper thead tr {
        background: #fff;
    }

    .el-table /deep/ .el-table__header-wrapper thead tr th {
        padding: 12px 0;
        border-color: rgba(167, 180, 201, .3);
        border-width: 2px 1px 1px 0;
        border-style: solid;
        text-align: left;
    }

    .el-table /deep/ .el-table__header-wrapper thead tr th .cell {
        padding: 0 10px;
        word-wrap: normal;
        word-break: break-all;
        white-space: normal;
        font-weight: bold;
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        line-height: 24px;
        position: relative;
        text-overflow: ellipsis;
    }


    .el-table /deep/ .el-table__body-wrapper tbody {
        width: 100%;
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr {
        background: #fff;
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr td {
        padding: 12px 0;
        color: #999;
        background: #fff;
        border-color: rgba(167, 180, 201, .3);
        border-width: 0 1px 1px 0;
        border-style: solid;
        text-align: left;
    }


    .el-table /deep/ .el-table__body-wrapper tbody tr:hover td {
        padding: 12px 0;
        color: #374254;
        background: #f9faff;
        border-color: #eee;
        border-width: 0 1px 1px 0;
        border-style: solid;
        text-align: left;
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr td {
        padding: 12px 0;
        color: #999;
        background: #fff;
        border-color: rgba(167, 180, 201, .3);
        border-width: 0 1px 1px 0;
        border-style: solid;
        text-align: left;
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr td .cell {
        padding: 0 10px;
        overflow: hidden;
        word-break: break-all;
        white-space: normal;
        line-height: 24px;
        text-overflow: ellipsis;
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr td .view {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 24px;
        margin: 0 10px 10px 0;
        outline: none;
        color: #fff;
        background: #2ddcd3;
        width: auto;
        font-size: 14px;
        height: 32px;
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr td .view:hover {
        opacity: 0.8;
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr td .add {
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr td .add:hover {
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr td .edit {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 24px;
        margin: 0 10px 10px 0;
        outline: none;
        color: #fff;
        background: #4771db;
        width: auto;
        font-size: 14px;
        height: 32px;
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr td .edit:hover {
        opacity: 0.8;
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr td .del {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 24px;
        margin: 0 10px 10px 0;
        outline: none;
        color: #fff;
        background: #ff382b;
        width: auto;
        font-size: 14px;
        height: 32px;
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr td .del:hover {
        opacity: 0.8;
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr td .btn8 {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 24px;
        margin: 0 10px 10px 0;
        outline: none;
        color: #fff;
        background: #ff2b88;
        width: auto;
        font-size: 14px;
        height: 40px;
    }

    .el-table /deep/ .el-table__body-wrapper tbody tr td .btn8:hover {
        opacity: 0.8;
    }

    // pagination
    .main-content .el-pagination /deep/ .el-pagination__total {
        margin: 0 10px 0 0;
        color: #666;
        font-weight: 400;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .btn-prev {
        border: none;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #666;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        min-width: 35px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .btn-next {
        border: none;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #666;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        min-width: 35px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .btn-prev:disabled {
        border: none;
        cursor: not-allowed;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #C0C4CC;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .btn-next:disabled {
        border: none;
        cursor: not-allowed;
        border-radius: 2px;
        padding: 0;
        margin: 0 5px;
        color: #C0C4CC;
        background: #f4f4f5;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .el-pager {
        padding: 0;
        margin: 0;
        display: inline-block;
        vertical-align: top;
    }

    .main-content .el-pagination /deep/ .el-pager .number {
        cursor: pointer;
        padding: 0 4px;
        margin: 0 5px;
        color: #666;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        border-radius: 2px;
        background: #f4f4f5;
        text-align: center;
        min-width: 30px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .el-pager .number:hover {
        cursor: pointer;
        padding: 0 4px;
        margin: 0 5px;
        color: #fff;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        border-radius: 2px;
        background: #2ddcd3;
        text-align: center;
        min-width: 30px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .el-pager .number.active {
        cursor: default;
        padding: 0 4px;
        margin: 0 5px;
        color: #FFF;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        border-radius: 2px;
        background: #2ddcd3;
        text-align: center;
        min-width: 30px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .el-pagination__sizes {
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .el-pagination__sizes .el-input {
        margin: 0 5px;
        width: 100px;
        position: relative;
    }

    .main-content .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__inner {
        border: 1px solid #DCDFE6;
        cursor: pointer;
        padding: 0 25px 0 8px;
        color: #606266;
        display: inline-block;
        font-size: 13px;
        line-height: 28px;
        border-radius: 3px;
        outline: 0;
        background: #FFF;
        width: 100%;
        text-align: center;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .el-pagination__sizes .el-input span.el-input__suffix {
        top: 0;
        position: absolute;
        right: 0;
        height: 100%;
    }

    .main-content .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
        cursor: pointer;
        color: #C0C4CC;
        width: 25px;
        font-size: 14px;
        line-height: 28px;
        text-align: center;
    }

    .main-content .el-pagination /deep/ .el-pagination__jump {
        margin: 0 0 0 24px;
        color: #606266;
        display: inline-block;
        vertical-align: top;
        font-size: 13px;
        line-height: 28px;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .el-pagination__jump .el-input {
        border-radius: 3px;
        padding: 0 2px;
        margin: 0 2px;
        display: inline-block;
        width: 50px;
        font-size: 14px;
        line-height: 18px;
        position: relative;
        text-align: center;
        height: 28px;
    }

    .main-content .el-pagination /deep/ .el-pagination__jump .el-input .el-input__inner {
        border: 1px solid #DCDFE6;
        cursor: pointer;
        padding: 0 3px;
        color: #606266;
        display: inline-block;
        font-size: 14px;
        line-height: 28px;
        border-radius: 3px;
        outline: 0;
        background: #FFF;
        width: 100%;
        text-align: center;
        height: 28px;
    }

    // list one
    .one .list1-view {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 15px;
        margin: 0;
        outline: none;
        color: #fff;
        background: #2ddcd3;
        width: auto;
        font-size: 14px;
        height: 40px;
    }

    .one .list1-view:hover {
        opacity: 0.8;
    }

    .one .list1-edit {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 15px;
        margin: 0;
        outline: none;
        color: #fff;
        background: #4771db;
        width: auto;
        font-size: 14px;
        height: 40px;
    }

    .one .list1-edit:hover {
        opacity: 0.8;
    }

    .one .list1-del {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 15px;
        margin: 0;
        outline: none;
        color: #fff;
        background: #ff382b;
        width: auto;
        font-size: 14px;
        height: 40px;
    }

    .one .list1-del:hover {
        opacity: 0.8;
    }

    .one .list1-btn8 {
        border: 0;
        cursor: pointer;
        border-radius: 4px;
        padding: 0 24px;
        margin: 4px;
        outline: none;
        color: #fff;
        background: #ff2b88;
        width: auto;
        font-size: 14px;
        height: 40px;
    }

    .one .list1-btn8:hover {
        opacity: 0.8;
    }

    .main-content .el-table .el-switch {
        display: inline-flex;
        vertical-align: middle;
        line-height: 30px;
        position: relative;
        align-items: center;
        height: 30px;
    }

    .main-content .el-table .el-switch /deep/ .el-switch__label--left {
        cursor: pointer;
        margin: 0 10px 0 0;
        color: #333;
        font-weight: 500;
        display: inline-block;
        vertical-align: middle;
        font-size: 16px;
        transition: .2s;
        height: 30px;
    }

    .main-content .el-table .el-switch /deep/ .el-switch__label--right {
        cursor: pointer;
        margin: 0 0 0 10px;
        color: #333;
        font-weight: 500;
        display: inline-block;
        vertical-align: middle;
        font-size: 16px;
        transition: .2s;
        height: 30px;
    }

    .main-content .el-table .el-switch /deep/ .el-switch__core {
        border: 1px solid #0000ff;
        cursor: pointer;
        border-radius: 15px;
        margin: 0;
        outline: 0;
        background: #0000ff;
        display: inline-block;
        width: 60px;
        box-sizing: border-box;
        transition: border-color .3s, background-color .3s;
        height: 30px;
    }

    .main-content .el-table .el-switch /deep/ .el-switch__core::after {
        border-radius: 100%;
        top: 1px;
        left: 1px;
        background: #FFF;
        width: 26px;
        position: absolute;
        transition: all .3s;
        height: 26px;
    }

    .main-content .el-table .el-switch.is-checked /deep/ .el-switch__core::after {
        margin: 0 0 0 -27px;
        left: 100%;
    }

    .main-content .el-table .el-rate /deep/ .el-rate__item {
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        font-size: 0;
        position: relative;
    }

    .main-content .el-table .el-rate /deep/ .el-rate__item .el-rate__icon {
        margin: 0 3px;
        display: inline-block;
        font-size: 18px;
        position: relative;
        transition: .3s;
    }
</style>
